<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<link rel="stylesheet" type="text/css" href="lunbo.css">
<script src="vue.js" ></script>
</head>

<body> 
<div id="app">	
<div class="carousel-wrap">
    <transition-group tag="ul" class="slide-ul" name="list">
        <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
            <a :href="list.clickUrl" >
                <img :src="list.image" :alt="list.desc">
            </a>
        </li>
    </transition-group>
    <div class="carousel-items">
        <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
    </div>
</div>
</div>
<script>
var vm=new Vue({
  el:"#app",
  data:{
    slideList: [
        {
          "clickUrl": "#",
          "desc": "丹巴藏寨",
          "image": "img/01.jpg"
        },
        {
          "clickUrl": "#",
          "desc": "拉萨郊外",
          "image": "img/02.jpg"
        },
        {
          "clickUrl": "#",
          "desc": "圣湖传说",
          "image": "img/03.jpg"
        },
        {
          "clickUrl": "#",
          "desc": "最美的草原",
          "image": "img/04.jpg"
        },
        {
          "clickUrl": "#",
          "desc": "最美丽的雪山",
          "image": "img/05.jpg"
        },
      ],
      currentIndex: 0,
      timer: '',			
  },
  methods:{
    go() {
        this.timer = setInterval(() => {
            this.autoPlay()
        }, 3000)
    },
    stop() {
        clearInterval(this.timer)
        this.timer = null
    },
    change(index) {
        this.currentIndex = index
    },
    autoPlay() {
        this.currentIndex++
        if (this.currentIndex > this.slideList.length - 1) {
            this.currentIndex = 0
        }
    },		

  },//methods
})
</script>

</body>
</html>
